<template>
  <div>
    <el-dialog
      title="商品信息"
      :visible="visible"
      width="60%"
      @close="onClose"
      :close-on-click-modal="false"
      :modal="modal"
      :modal-append-to-body="modalAppendToBody"
      :append-to-body="appendToBody"
    >
      <el-form>
        <el-tabs v-model="tabsName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="base">
            <el-card>
              <div style="font-weight: bold;font-size: 12px;margin-bottom: 10px">门店信息</div>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="顶级渠道：" :label-width="labelWidth">
                    {{ channelStore.topChannelName }}
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="门店名称：" :label-width="labelWidth">
                    {{ channelStore.channelName }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="渠道编码：" :label-width="labelWidth">
                    {{ channelStore.channelCode }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="所属蜂窝：" :label-width="labelWidth">
                    {{ channelStore.cellularName }}
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="门店类型：" :label-width="labelWidth">
                    {{ channelStore.storeType === 'KEY_STORES' ? '重点门店' : '非重点门店' }}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="店型：" :label-width="labelWidth">
                    {{ channelStore.storeLevel }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="城市运营经理：" :label-width="labelWidth">
                    {{ channelStore.operationManager }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <div style="font-weight: bold;font-size: 12px;margin-bottom: 10px">药品信息</div>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="商品编码：" :label-width="labelWidth">
                    {{ goodsInfo.goodsCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="商品名称：" :label-width="labelWidth">
                    <div style="width: 90%">
                      {{ goodsInfo.goodsName }}
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否处方药：" :label-width="labelWidth">
                    {{ goodsInfo.prescription ? '是' : '否' }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="商品分类：" :label-width="labelWidth">
                    {{ goodsInfo.categoryName }}
                  </el-form-item>
                </el-col>
                <el-col :span="10">
                  <el-form-item label="采购分类：" :label-width="labelWidth">
                    {{ goodsInfo.classifyName }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-card>
              <div style="font-weight: bold;font-size: 12px;margin-bottom: 10px">竞对门店</div>
              <el-table :data="competeStores" tooltip-effect="dark" style="width: 100%" ref="opponentTable">
                <el-table-column align="center" min-width="250px" prop="storeName" label="竞对名称"></el-table-column>
                <el-table-column align="center" min-width="80px" prop="originPrice" label="原价"></el-table-column>
                <el-table-column align="center" min-width="80px" prop="channelPrice" label="售价">
                  <template slot-scope="scope">
                    <div>
                      {{ scope.row.activityPrice ? scope.row.activityPrice : scope.row.channelPrice }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column align="center" min-width="70px" prop="monthSaled" label="销量"></el-table-column>
              </el-table>
            </el-card>
          </el-tab-pane>
          <el-tab-pane label="销售信息" name="sale">
            <el-card>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="门店名称：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.storeName }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="渠道编码：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.channelCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="顶级渠道：" :label-width="labelWidth2">
                    {{ channelStore.topChannelName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="商品编码：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.goodsCode }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="商品名称：" :label-width="labelWidth2">
                    {{ goods.goodsName ? goods.goodsName : goodsInfo.goodsName }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="90天平均订单数：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.billCnt }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="90天平均销量：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.saleQty }}
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="90天平均销售额：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.saleAmt }}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="6">
                  <el-form-item label="90天平均毛利额：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.grossProfAmt }}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="90天平均毛利率：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.grossMargin }}
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="90天平均成本价：" :label-width="labelWidth2">
                    {{ salesInfo.goodsSalesInfo.costAmt }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-table :data="salesInfo.adjustPriceList" tooltip-effect="dark" style="width: 100%" ref="adjustPriceTable">
              <el-table-column align="center" min-width="200px" prop="storeCode" label="调价时间">
                <template slot-scope="scope">
                  <div>
                    {{ formatDate(scope.row.adjustPriceTime, 'YYYY-MM-DD HH:mm:ss') }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="70px" prop="creator" label="调价人"></el-table-column>
              <el-table-column align="center" min-width="100px" prop="channelPrice" label="原价">
                <template slot-scope="scope">
                  <div>{{ scope.row.channelPrice }}/{{ scope.row.newChannelPrice ? scope.row.newChannelPrice : '无' }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="100px" prop="activityPrice" label="特价">
                <template slot-scope="scope">
                  <div>{{ scope.row.activityPrice }}/{{ scope.row.newActivityPrice ? scope.row.newActivityPrice : '无' }}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="100px" prop="limitNum" label="原价限购">
                <template slot-scope="scope">
                  <div>
                    {{ getLimitNum(scope.row, scope.$index) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="100px" prop="activityPriceLimit" label="特价限购">
                <template slot-scope="scope">
                  <div>
                    {{ getActivityPriceLimit(scope.row, scope.$index) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="70px" prop="billCnt" label="订单数"></el-table-column>
              <el-table-column align="center" min-width="60px" prop="saleQty" label="销量"></el-table-column>
              <el-table-column align="center" min-width="70px" prop="saleAmt" label="销售额"></el-table-column>
              <el-table-column align="center" min-width="70px" prop="grossProfAmt" label="毛利额"></el-table-column>
              <el-table-column align="center" min-width="70px" prop="grossMargin" label="毛利率"></el-table-column>
              <el-table-column align="center" min-width="70px" prop="city" label="成本价">
                <template>
                  <div>
                    {{ goods.costPrice }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" min-width="80px" prop="salesRank" label="销售排名"></el-table-column>
              <el-table-column align="center" min-width="60px" prop="monthSales" label="月售"></el-table-column>
            </el-table>
            <!--            <el-card>-->
            <!--              <div style="font-weight: bold;font-size: 12px;margin-bottom: 10px">趋势图</div>-->
            <!--              <div id="chartLineBox" :class="$style.chart"></div>-->
            <!--            </el-card>-->
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
  </div>
</template>

<style lang="scss" module>
@import './index.module.scss';
</style>

<script>
import Index from './index';
export default Index;
</script>
